<template>
  <a-row type="flex" justify="center">
    <a-col :span="16">
      <a-card class="card">
        <a-row type="flex" justify="center">
          <a-col :span="23">
            <!-- title -->
            <p class="card-title-p">
              {{ this.title }}
            </p>
            <a-divider class="card-title-divider"/>
          </a-col>
        </a-row>
        <a-row type="flex" justify="center">
          <a-col :span="10">
            <!-- 地图组件 -->
            <Chart v-if="this.geoJson.type"
                   :options="options"
                   :mapName="mapName"
                   ref="chartTest"
                   class="chart"
                   :width="this.width"
                   :height="this.height"
                   :geoJson="geoJson"/>
          </a-col>
          <a-col :span="14">
            <a-row class="li-row">
              <a-col :span="23">
              <!--  实时数据-->
              <p style="color: green;margin-bottom: 0.3em">{{ '山西省益农社实时数据' }}</p>
              <ul>
                <li v-for="(li,index) in liArr" :key="index" style="padding-top: 0.2em">
                  {{ `${li.msg}${totalData[li.key]} ${li.unit}` }}
                </li>
              </ul>
              </a-col>
            </a-row>
            <a-row style="margin-top: 1em">
              <a-col :span="23">
              <!-- 表格 -->
              <a-table
                  :columns="tableColumns"
                  :data-source="tableData"
                  :pagination="false"
                  :rowKey="record=>record.deptId"
                  :rowClassName="className"
                  class="stock-out-detail-table"
                  :scroll="{y:200}"
              />
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import request from '~/utils/outreq'
import Chart from '~/components/chart/Chart'
import {bigData} from '~/api/home'

export default {
  name: "BigData",
  computed: {},
  data() {
    return {
      title: '益农社大数据',
      // url: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples//data/asset/geo/HK.json',
      url: './shanxi.json',
      fakeDataUrl: './fake-data.json',
      mapName: 'shanxi',
      height: '40rem',
      width: '20rem',
      geoJson: {},
      seriesData: [],
      options: {
        visualMap: {
          min: 500,
          max: 3000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          show: false,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        tooltip: {
          trigger: 'item',
          formatter(params) {
            return (
                `<h2>${params.name}</h2>
                益农社数量：${params.value}</br>
                县级代理数量：${params.data.cityProxyCount}</br>
                用户数：${params.data.populationCount}</br>
                商品数：${params.data.goodsCount}</br>`
            )
          }
        },
        series: [
          {
            type: 'map',
            mapType: 'shanxi', // 自定义扩展图表类型
            label: {
              show: true
            },
            data: []
          }
        ]
      },
      liArr: [{
        key: 'totalCount',
        msg: '山西省益农社数量：',
        count: 0,
        unit: '个'
      },
        {
          key: 'countyCount',
          msg: '山西省县级代理数量：',
          count: 0,
          unit: '家'
        },
        {
          key: 'userCount',
          msg: '山西省益农社用户数：',
          count: 0,
          unit: '人'
        },
        {
          key: 'prodCount',
          msg: '山西省益农社平台商品数：',
          count: 0,
          unit: '件'
        }],
      totalData: {
        totalCount: 0,
        countyCount: 0,
        userCount: 0,
        prodCount: 0
      },
      tableColumns: [{
        title: '地区名称',
        dataIndex: 'cityName'
      },
        {
          title: '站点数量',
          dataIndex: 'siteCount'
        },
        {
          title: '县级代理数量',
          dataIndex: 'cityProxyCount'
        },
        {
          title: '用户总数',
          dataIndex: 'populationCount'
        },
        {
          title: '商品总数',
          dataIndex: 'goodsCount'
        }
      ],
      tableData: []
    }
  },
  components: {
    Chart
  },
  methods: {
    getMapJson() {
      request.get(this.url).then((res) => {
        this.geoJson = res.data;
      })
    },
    initTbData(data) {
      this.tableData = data
    },
    className(record, index) {
      return index % 2 ? 'deep_gray' : 'shallow_gray'
    },
    setOptions(data) {
        this.options.series[0].data = data
        this.$refs.chartTest.chart.setOption(this.options);
        // this.$echarts.setOption(this.options);
    },
    getDataList() {
      /*bigData().then((res) => {
        if (res.code === 0) {
          this.seriesData = res.data.map(item => {
            let jsonData = {}
            jsonData.name = item.cityName
            jsonData.value = item.siteCount
            jsonData.goodsCount = item.goodsCount
            jsonData.cityProxyCount = item.cityProxyCount
            jsonData.populationCount = item.populationCount
            return jsonData
          })
        }*/
      request.get(this.fakeDataUrl).then((res) => {
        if (res.data.code === 0) {
          this.seriesData = res.data.data.map(item => {
            let jsonData = {}
            jsonData.name = item.cityName
            jsonData.value = item.siteCount
            jsonData.goodsCount = item.goodsCount
            jsonData.cityProxyCount = item.cityProxyCount
            jsonData.populationCount = item.populationCount
            return jsonData
          })
        }

        this.initTbData(res.data.data)
        this.countData(res.data.data)
        this.setOptions(this.seriesData)
      })
    },
    countData(dataArr) {
      dataArr.forEach(item => {
        this.totalData.totalCount += item.siteCount
        this.totalData.countyCount += item.cityProxyCount
        this.totalData.userCount += item.populationCount
        this.totalData.goodsCount += item.goodsCount
      })
    }
  },
  fakeData(){

  },
  mounted() {
    this.getDataList()
    this.getMapJson()
    this.initTbData()
  }
}
</script>

<style lang="scss" scoped>

@import "/assets/styles/base";

.chart {
  margin-top: -4rem;
  margin-bottom: -4rem;
}

.li-row {
  font-size: 1.4em;
  color: #232323;
  letter-spacing: 0.06em;
}

.stock-out-detail-table {

  & /deep/ .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
    padding: 8px 8px;
    text-align: center;
    font-size: 1em;
    font-weight: 525;
    background-color: #059655;
    color: #ffffff;
  }

  & /deep/ .ant-table-tbody .ant-table-row td {
    text-align: center;
    padding-top: 8px;
    font-weight: 530;
    padding-bottom: 8px;
  }

  & /deep/ .ant-table-body {
    max-height: 18em !important;
    margin-right: -16px !important;
    &::-webkit-scrollbar {
      height: 12px;
    }
  }

  &.ant-table-header {
    background: #ffffff;
  }

  & /deep/ .ant-table-fixed-header .ant-table-scroll .ant-table-header::-webkit-scrollbar {
    border: 1px solid #fff;
  }

  /deep/ .ant-table-header .ant-table-hide-scrollbar {
    margin-right: -11px;
  }
}

/deep/ .shallow_gray {
  background-color: #fff;
}

/deep/ .deep_gray {
  background-color: rgba(240, 240, 240, 1);
}

/deep/ .ant-table-scroll div[style] {
  margin-right: -16px !important;
}
</style>
